<template>
	<div class="container">
		<el-form ref="loginForm" :model="formData" :rules="rules" label-width="65px" hide-required-asterisk>
			<h2>胖虎到家 - 后台登录</h2>
			<h5>胖虎胖虎，我是静香，快让我进去!!!</h5>
			<el-form-item label="账号" prop="username">
				<el-input v-model="formData.username" placeholder="请输入账号" prefix-icon="el-icon-user"></el-input>
				<!-- prefix-icon:设置小图标 -->
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="formData.password" placeholder="请输入密码" type="password" show-password
					prefix-icon="el-icon-lock">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="login">登录</el-button>
				<el-button @click="resetForm">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					username: 'admin',
					password: 'admin'
				},
				rules: {
					username: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 20,
							message: '长度在 6 到 20 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 4,
							max: 9,
							message: '长度至少 6 个字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			login() {
				// 先验证form表单是否满足验证规则，如果满足则调其中的方法
				// function(valid){.....} --> (valid)=>{....}
				this.$refs['loginForm'].validate((valid) => {
					if (valid) {
						//数据合法
						//调用后端接口来实现登录效果
						this.$http.post('http://43.143.190.87:8182/login?username='+this.formData.username+'&pwd='+this.formData.password)
						.then(res=>{
							if(res.data.code==1){
								this.$message.success('登录成功')
								//1.把登录的相关信息保存到sessionStorage中
								//2.跳转接口
								 this.$router.push('/main')
							}else{
								this.$message.error('账号密码有误!')
							}
						})
						.catch(error=>{
							this.$message.error('服务器异常！！')
						})
						
						
						// 去登录的功能
						// alert(this.formData.username + " " +
						// 	this.formData.password);
					} else {
						this.$message({
							showClose: true,
							message: '请输入正确的账号和密码！',
							type: 'error'
						});
						return false;
					}
				});
			},
			resetForm() {
				this.$refs['loginForm'].resetFields();
			}
		}

	}
</script>

<style scoped="scoped">
	.container {
		height: 100vh;
		/* vh:view height*/
		background: url('../assets/R-C (1).jpg') no-repeat center;
		overflow: hidden;
		background-size: 100% 100%;
	}

	.el-form {
		width: 450px;
		margin: 150px auto;
		padding: 30px 50px;
		border-radius: 10px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		background: rgba(255, 255, 255, 0.8);
	}

	h2 {
		text-align: center;
	}
	h5 {
		text-align: center;
		font-family: cursive;
		color: red;
	}
</style>